<template>
  <div style="overflow:hidden; ">
<!--   <marquee direction="left" behavior="scroll" scrollamount="1" scrolldelay="1" loop="-1" width="100%" height="20"  align="absbottom" bgcolor="#0099FF" hspace="0" vspace="10" onMouseOut=this.start()>
      指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...
  </marquee> -->
    <swiper  loop auto :list="banner" :index="banner_index" @on-index-change="demo07_onIndexChange"></swiper>

    <div  :class="fixedsec?'searchconten':'aaa'">
      <search :results="results" v-model="value" @on-change="changeserch" @on-focus="routerlink" @on-result-click="listclick" @on-cancel="remsearchcon" :auto-fixed="true" auto-scroll-to-top top="0px" position="relative"  ></search>
    </div>

    <sticky scroll-box="vux_view_box_body" :offset="49" :check-sticky-support="false">

      <scroller lock-y :scrollbar-y=false class="tabheadernav">
        <tab style="position: relative; white-space:nowrap; display:inline-block" active-color='#1acbbb' :line-width="1"  v-model="tabindex">
          <tab-item class="vux-center"  v-for="(item, index) in list2" :key="index">{{item}}</tab-item>
        </tab>
      </scroller>

      <swiper v-model="tabindex"  :height="swcheig" >
        <swiper-item v-for="(item, index) in list2" :key="item"   >
          <!-- 根据循环时候的标识确定每个的分类 item.type 来请求-->
          <Swc :nf="index"  ></Swc>
        </swiper-item>
      </swiper>

    </sticky>

  </div>
</template>

<script>
import {  Swiper,Search,Sticky,Tab,TabItem,SwiperItem,Scroller } from 'vux'
import Swc from '../comment/swcommit';
import {lzd_localStorage} from '../resources/js/commit.js';
export default {
  components: {

    Swc,
    Swiper,
    Search,
    Tab,
    TabItem,
    Sticky,
    SwiperItem,
    Scroller
  },
  data () {
    return {
    banner: [{
            url: 'http://m.baidu.com',
            img: 'https://static.vux.li/demo/1.jpg',
            title: '送你一朵fua'
          }, {
            url: 'http://m.baidu.com',
            img: 'https://static.vux.li/demo/1.jpg',
            title: '送你一辆车'
          }, {
            url: 'http://m.baidu.com',
            img: 'https://static.vux.li/demo/1.jpg',
            title: '送你一次旅行'
          }],
    banner_index: 0,//bannerindex
    list2: ['推荐', 'UI','前端', 'WebApp', 'JAVA',  'PHP',  'linux', 'window'], //切换导航标题
    tabindex: 0,  //导航默认选项
    value:"",  //搜索框值
    results: [{title:"fasf",other:12}],  //搜索框提示文字数组
    fixedsec:false,
    scroll: '',
    swcheig:"580px",
    swcheignb:"317px",

    }
  },
  methods: {
    demo07_onIndexChange (index) { //导航轮播
      this.banner_index = index
    },
   scrollsbody() {
    this.scroll = document.body.scrollTop;
    // console.log(this.scroll)
    if ((this.scroll>=100 && this.scroll<=169) || ( this.scroll>=200 && this.scroll<379)) {
      document.body.scrollTop=180;
      this.swcheignb=(document.documentElement.clientHeight-117)+"px";
      // console.log( this.swcheignb)
    }
   },
   routerlink(){
      this.fixedsec=true;
      console.log(this.fixedsec)
      // this.$router.push('/searchcont');
   },
   listclick(item){
      alert(JSON.stringify(item))
   },
   remsearchcon(){
    this.fixedsec=false;
    // alert("f")
    console.log(this.fixedsec)
   },
   changeserch(){
    //请求接口
    let newarrs=[{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我查询结果f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12},{title:"f我的查询结果",other:12},{title:"新的",other:12}];
    this.results=newarrs
   }

  },
  mounted () {
      // this.$store.dispatch('setWhichpage', 'order');

      this.swcheig=(document.documentElement.clientHeight-87)+"px";
      this.swcheignb=(document.documentElement.clientHeight-317)+"px";
      // console.log(document.documentElement.clientHeight)
      this.$nextTick(function() {
      var _this=this;
       window.addEventListener('scroll', _this.scrollsbody)
         setTimeout(()=>{this.$store.state.isload=false},100)
         // alert(lzd_localStorage.localStorage(1))
 // alert("f")

      })
  }
}
</script>
<style lang="scss"  >
#app .vux-slider > .vux-indicator > a > .vux-icon-dot, .vux-slider .vux-indicator-right > a > .vux-icon-dot{
  width:7px;
  height:7px;
  border-radius: 100%;
  transition: all 0.3s ease-in;
  background-color: rgba(255,255,255,.3);
  border:1px solid  rgba(255,255,255,.2);
}
#app .vux-slider > .vux-indicator > a > .vux-icon-dot.active, .vux-slider .vux-indicator-right > a > .vux-icon-dot.active {
  width:13px;
  height:13px;
    box-shadow: -2px 2px 20px #fff;
   border:1px solid  rgba(255,255,255,.5);
  background-color: rgba(255,255,255,.9)
}
.tabheadernav {
  box-shadow: 1px 6px 7px #D8D8D8;
  margin-bottom: 10px;
  background-color: #fff;
  // border-bottom: 1px solid #eee;
  .vux-tab .vux-tab-item {
    display: inline-block;
    padding: 0 10px;
    width:auto;
    background: transparent;
    min-width: 70px;
    max-width: 100px;
  }
}
.vux-slider , .vux-slider > .vux-swiper {
  // overflow: visible!important;
}
#app .weui-panel:first-child{
//   margin-top: -55px;
}

.list-box {
  .weui-panel__hd {
    display:none;
  }
}
.searchconten{
  position:fixed;
  top:0;
  left: 0;
  right:0;
  bottom: 0;
  height:100%;
  background-color: #fff;
  z-index: 1000;
  .weui-cell_access {
    padding:5px 7px;
    display:inline-block;
    .weui-cell__bd {
      border: 1px solid #F6F6F6;
      padding: 10px 15px;
      border-radius: 15px;;
      background-color: #F6F6F6;
    }
  }
  .weui-cell{
    &:before {
      display:none;
    }
  }
  .weui-cells.vux-search_show{
    font-size: 13px!important;
    color:#484848;

  }
}
</style>
